<template>
<div class="page">
  <div class="menu" style="margin-right: 10px">
  <el-menu>
    <el-sub-menu index="1" style="width: 200px">

      <template #title>

        <el-icon style="font-size: 21px;"><Sunny/></el-icon>
        <span>猫咪用品</span>

      </template>
      <el-menu-item index="/catEat">吃喝</el-menu-item>
      <el-menu-item index="/catPlay">玩乐</el-menu-item>
      <el-menu-item index="/catWear">装备</el-menu-item>

    </el-sub-menu>
    <el-sub-menu index="2" style="width: 200px">

      <template #title>

        <el-icon style="font-size: 21px;"> <MostlyCloudy /></el-icon>
        <span>狗狗用品</span>

      </template>
      <el-menu-item index="/dogEat">吃喝</el-menu-item>
      <el-menu-item index="/dogPlay">玩乐</el-menu-item>
      <el-menu-item index="/dogWear">装备</el-menu-item>

    </el-sub-menu>
  </el-menu>
  </div>
  <div class="list">
  <el-row :gutter="20">
    <el-col :span="6" v-for="i in productArr" style="margin: 10px 0">
  <el-card  class="productCard" @click="loadProduct(i.id)">
    <img  :src= "i.img"style="width: 100%"  >
    <p style="font-size: 20px;font-weight: bold;">￥{{ i.price }}</p>
    <div style="margin-bottom: 40px">
      <span style="float: left">{{ i.title }}</span>
      <span style="float: right ">{{ i.price }}</span>
    </div>
  </el-card>
    </el-col>
  </el-row>
  </div>
</div>
</template>

<script setup>
import {Sunny} from "@element-plus/icons-vue";
import router from "@/router";

const productArr = [
  {id:1,title:"niganma", price:10.89, img:"/640.webp"},
  {id:2,title:"niganma", price:10.89, img:"/640.webp"},
  {id:3,title:"niganma", price:10.89, img:"/640.webp"},
  {id:4,title:"niganma", price:10.89, img:"/640.webp"},
  {id:5,title:"niganma", price:10.89, img:"/640.webp"}]
const loadProduct = (id)=>{
  console.log("Clicked product ID:", id); // 添加此行以检查 ID
  if (id) {
    router.push(`/productDetail?id=${id}`);
  } else {
    console.error("商品 ID 未定义");
  }
  router.push(`/productDetail?id=${id}`);
}

</script>

<style scoped>
.page{
  display: flex;
}
.menu{
  width: 200px; /* 左侧菜单宽度 */
  background-color: rgb(255,255,255);
  padding-top: 15px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}
.productCard:hover{
  transform:scale(1.03);
}
</style>